<template>
	<i-drawers bodyHeight="980rpx" v-model="selectShow" :diySlot="true">
		<view class="select_bdy">
			<view class="bodys">
				<view class="body_title">
					项目分类
				</view>
				<view class="status_list">
					<view @click="selectStatus1(item, index)" :key="index"
						v-for="(item,index) in [{label: '全部', 'value': null},...mer_service_type]"
						:class="{active: activeStatus === index}" class="status_item">
						{{item.label}}
					</view>
				</view>
				<view class="body_title">
					状态
				</view>
				<view class="status_list">
					<view @click="selectStatus(item, index)" :key="index" v-for="(item,index) in status_list"
						:class="{active: active === index}" class="status_item">
						{{item.label}}
					</view>
				</view>

				<view class="buttons">
					<i-buttons radius="4" padding="18rpx 88rpx" size="32" color="#16161F" bgColor="#F3F4F5"
						@click="reset">重置</i-buttons>
					<view style="width: 20rpx;"></view>
					<i-buttons radius="4" padding="18rpx 88rpx" size="32" color="#fff" bgColor="#FB652E"
						@click="submit">确定</i-buttons>
				</view>
			</view>
		</view>
	</i-drawers>
	<view class="serveProject">
		<view class="search">
			<i-search @clear="clear" width="440rpx" @change="searchChange" v-model="formData.keyword" margin="none"
				bgColor="#fff" placeholder="项目名称/快捷搜索码搜索"></i-search>
			<view class="screens" @click="showSelect">
				<text
					:style="{color: (changeData.active || changeData.fromDate) ? '#FB652E ': '#16161F'}">{{(changeData.active || changeData.fromDate) ? '已筛选' : '筛选'}}</text>
				<image src="../../static/images/more_icon.png" mode=""></image>
			</view>
		</view>
		<i-scrollList @more="more" height="calc(100vh - 190rpx)" :total="pageData.total"
			:pageTotal="pageData.list.length">
			<view class="titles">
				<text>服务项目为创建工单时需选择的项目，无需核销</text>
			</view>
			<i-card top="20rpx" v-for="item in pageData.list" :key="item.id">
				<view class="card_title">
					<text class="title">{{item.serviceName}}</text>
					<text
						:style="{color: item.serviceStatus === 0 ? '#16161F' : '#A0A0AD'}">{{item.serviceStatus === 0 ? '已上架' : '已下架'}}</text>
				</view>
				<view class="card_title prices">
					<text>{{item.serviceTypeLabel}}</text>
					<i-price>{{item.price || 0}}</i-price>
				</view>
				<view class="card_bottm">
					<i-buttons  color="#5C6D80"
						@click="navTo('/pages/business/goAddProject?id='+ item.id , 'navigateTo')">编辑</i-buttons>
				</view>
			</i-card>
			<view v-if="skeleton" v-for="(item,index) in 8" :key="index"
				style=" width: calc(100% - 48rpx); margin: 0 auto;margin-top: 20rpx;">
				<i-skeleton size="0" :icon="false" :rowsW="['80%', '60%', '60%', '60%']"
					:rowsH="['34rpx', '38rpx', '24rpx', '24rpx']" height="224rpx" :rows="4"></i-skeleton>
			</view>
		</i-scrollList>
		<view class="flex_bottom" @click="navTo('/pages/business/goAddProject', 'navigateTo')">
			<image src="../../static/images/add@2x.png"></image>
			添加项目
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		computed,
		ref,
		onMounted
	} from 'vue';
	import useStore from '../../stores/index'
	import { clearForm, navTo } from '../../utils/common';
	import { getServiceList } from '../../api/business'

	const store = useStore()
	const mer_service_type = computed(() => store.dictTypes?.mer_service_type || [])

	const changeData = reactive<any>({
		active: 0,
		activeStatus: 0
	})

	const formData = reactive({
		"tyjPageNum": 1,
		"tyjPageSize": 15,
		serviceType: '',
		status: null,
		keyword: ''
	})
	const pageData = reactive({
		total: 0,
		list: []
	})

	const status_list = [
		{
			label: '全部',
			value: null
		},
		{
			label: '已上架',
			value: '0'
		},
		{
			label: '已下架',
			value: '1'
		},
	]

	const active = ref(0)
	const activeStatus = ref(0)
	const activeName = ref('筛选')
	const selectShow = ref(false)
	const skeleton = ref(true)


	const getPageData = async () => {
		const data = await getServiceList(formData)
		pageData.list = pageData.list.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}
	const clearData = () => {
		pageData.list = []
		pageData.total = 0
		formData.tyjPageNum = 1
		skeleton.value = true
	}
	const showSelect = () => {
		selectShow.value = true
		active.value = changeData.active
		activeStatus.value = changeData.activeStatus
	}
	const submit = () => {
		selectShow.value = false
		formData.status = changeData.status
		formData.serviceType = changeData.serviceType
		changeData.active = active.value
		changeData.activeStatus = activeStatus.value
		clearData()
		getPageData()
	}

	const searchChange = () => {
		clearData()
		getPageData()
	}
	const clear = () => {
		formData.keyword = ''
		clearData()
		getPageData()
	}
	const reset = () => {
		formData.status = ''
		formData.serviceType = ''
		active.value = 0
		activeStatus.value = 0
		activeName.value = '筛选'
		clearForm(changeData)
		clearData()
		selectShow.value = false
		getPageData()
	}

	const more = () => {
		formData.tyjPageNum++
		getPageData()
	}

	onShow(() => {
		clearData()
		getPageData()
	})
	const selectStatus = (item : { label : string, value : number }, i : number) => {
		active.value = i
		changeData.status = item.value
	}

	const selectStatus1 = (item : { label : string, value : string }, i : number) => {
		activeStatus.value = i
		// activeName.value = item.label
		changeData.serviceType = item.value
	}


	onMounted(() => {
		!(mer_service_type?.value?.length) && store.setDictList('mer_service_type')
	})
</script>

<style lang="scss" scoped>
	.serveProject {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f4f5;

		.search {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexRS;
			height: 44px;
		}

		.titles {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			margin-top: 36rpx;
			@include flexR;
			height: 72rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 24rpx;

			text {
				margin-left: 32rpx;
				@include dfont(26rpx);
				color: #A0A0AD;
			}
		}

		.card_title {
			width: 100%;
			@include flexRS;
			@include dfont;
			margin-bottom: 18rpx;
			white-space: nowrap;

			.title {
				width: 75%;
				@include titlefont(28rpx);
				@include overflow;
			}
		}

		.prices {
			text {
				color: #8E8E93;
			}
		}

		.card_bottm {
			margin-top: 24rpx;
			width: 100%;
			@include flexR;
			justify-content: flex-end;

			.bot_left {
				@include flexC;
				@include dfont(24rpx);
				color: #A0A0AD;
			}

		}
	}

	.bodys {
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.body_title {
			@include titlefont(28rpx);
			margin-bottom: 24rpx;
		}

		.status_list {
			@include flexR;
			flex-wrap: wrap;
			margin-bottom: 40rpx;
			width: 100%;

			.status_item {
				background: $background-color;
				border-radius: 24rpx;
				@include flexRC;
				@include dfont(28rpx);
				white-space: nowrap;
				border: 2rpx solid #F3F4F5;
				margin: 12rpx 10rpx;
				width: 202rpx;
				height: 80rpx;
			}

			.active {
				transition: all .3s ease-out;
				border: 2rpx solid #FB652E;
				color: #FB652E;
				background: rgba(251, 101, 46, 0.1);
			}
		}


		.buttons {
			margin-top: 104rpx;
			width: 100%;
			@include flexRC;
		}
	}

	.select_bdy {
		height: 850rpx;
		overflow-y: auto;
	}
</style>